<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://example.com/mytags" prefix="mytags"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<link rel="stylesheet" href="../resources/css/user.css">
<title>个人评论区</title>
<style>
/* 设置整体背景 */
body {
	background-image:
		url('https://ts1.cn.mm.bing.net/th/id/R-C.df0ae99c837dd53d201c6c898833e647?rik=9UYsRJomFW3zFg&riu=http%3a%2f%2fwww.pooban.com%2fimages%2f201511%2fgoods_img%2f2056_G_1446852370863.png&ehk=hOZFnvJcDYw46j%2fvuewxxwaf%2bHAYB3zdIthlMXWyes0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1');
	
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* 添加其他样式，根据需要自行调整 */
</style>

<link rel="stylesheet" type="text/css"
	href="<c:url value = "/resources/css/index.css"/>">
</head>

<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg">
		<a class="navbar-brand" href="#">书影音</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/home"/>">首页 <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/book"/>">读书</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/movie"/>">影视</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/music"/>">音乐</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/filter"/>">筛选</a></li>
				<li class="nav-item active"><a class="nav-link"
					href="<c:url value = "/user"/>">我的</a></li>
			</ul>
			<c:if test="${not empty sessionScope.user}">
				<a class="nav-link" style="color: white"
					href="<c:url value = "/user"/>">欢迎您，${user.username }</a>
			</c:if>
			<form class="form-inline my-2 my-lg-0" method="POST"
				action="<c:url value = "/search"/>">
				<input class="form-control mr-sm-2" type="search" name="title"
					placeholder="搜索" aria-label="搜索">
				<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
			</form>
		</div>
	</nav>

	<!-- 评论表单 -->
	<div class="container mt-3">
		<div>
			<h2 class="display-4">我的评论</h2>
		</div>
		<c:forEach var="comment" items="${commentList}">
			<c:if test="${empty commentList}">
				<label for="content">没有任何评论，快去评论吧！</label>
			</c:if>
			<c:if test="${not empty commentList}">
				<div class="shadow p-3 mb-5 bg-white rounded">
					<div class="d-flex justify-content-between">
						<h5 class="mb-0">评论作品：${comment.media.title}</h5>
						<small>评论时间：${comment.commentDate}</small>
					</div>
					<hr>
					<div>
						<h6>内容：</h6>
						<p>${comment.commentText}</p>
					</div>
					<div class="d-flex justify-content-between align-items-center">
						<div>
							<label for="rating" class="mr-2">我的评分：<font color="red">${comment.rating}</font></label>
						</div>
						<div>
							<button type="button" class="btn btn-danger mr-2"
								data-toggle="modal"
								data-target="#deleteCommentModal${comment.id}">删除</button>
							<button type="submit" class="btn btn-primary" data-toggle="modal"
								data-target="#editCommentModal${comment.id}">修改</button>
						</div>
					</div>
				</div>
				<hr>
			</c:if>
		</c:forEach>
	</div>

	<!-- 提示删除评论模态框 -->
	<c:forEach var="comment" items="${commentList}">
		<div class="modal" id="deleteCommentModal${comment.id}">
			<div class="modal-dialog">
				<div class="modal-content">
					<!-- 模态框头部 -->
					<div class="modal-header">
						<h3 class="modal-title">提示</h3>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<!-- 模态框主体 -->
					<!-- 删除评论的表单  -->
					<form action="<c:url value="/deleteComment"/>" method="post">
						<div class="modal-body">
							<p>
								确定要删除 <strong>此评论</strong> 吗？
							</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">取消</button>
							<!-- 评论id -->
							<input type="hidden" name="commentId" value="${comment.id}">
							<!-- 删除按钮 -->
							<input type="submit" class="btn btn-danger" />
						</div>
					</form>
				</div>
			</div>
		</div>
	</c:forEach>

	<!-- 提示修改评论模态框 -->
	<c:forEach var="comment" items="${commentList}">
		<div class="modal" id="editCommentModal${comment.id}">
			<div class="modal-dialog">
				<div class="modal-content">
					<!-- 模态框头部 -->
					<div class="modal-header">
						<h3 class="modal-title">提示</h3>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<!-- 模态框主体 -->
					<!-- 修改评论的表单  -->
					<form action="<c:url value="/editComment"/>" method="post">
						<div class="modal-body">
							<textarea name="newComment" rows="5" class="col-12">${comment.commentText}</textarea>
							<div class="form-group">
								<label for="rating">评分:</label> <select class="form-control"
									id="rating" name="rating" required>
									<option selected>5</option>
									<option>4</option>
									<option>3</option>
									<option>2</option>
									<option>1</option>
								</select>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary"
								data-dismiss="modal">取消</button>
							<!-- 评论id -->
							<input type="hidden" name="commentId" value="${comment.id}">
							<!-- 修改按钮 -->
							<input type="submit" class="btn btn-info" />
						</div>
					</form>
				</div>
			</div>
		</div>
	</c:forEach>

	<div>
		<mytags:pagination page="${page}" pageCount="${pageCount}" />

	</div>

	<br>
	<br>
	<!-- 页脚     -->
	<div class="fixed-bottom">
		<footer class=" text-center py-3"> &copy; 2023 书影音 </footer>
	</div>

	<!-- 引入Bootstrap的JavaScript和Popper.js，用于处理导航栏的交互效果 -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>